import * as YvanUI from 'yvan-ui-wotu'

interface Ref {
    theform: YvanUI.Form
    t1: YvanUI.Text,
    t2: YvanUI.Text
}

const _ = YvanUI.lodash
const React = YvanUI.React
const {Switch} = YvanUI.Antd
const render = YvanUI.render

export default class Simple extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        t1: '',
        t2: '',
        repeats: 1
    })

    ctlState = this.$$({
        t1Disabled: true,
        t2Disabled: true,
        t3Disabled: true
    });


    place1 = Symbol()

    vjson = {
        title: '极简示例',
        items: [
            {
                view: 'form',
                debug: 'main',
                ref: 'theform',
                items: [
                    {
                        view: 'card',
                        rows: [
                            {
                                cols: [
                                    {
                                        view: 'fieldset',
                                        title:'基础属性',
                                        items:[
                                            {
                                            view: 'number',
                                            bind: 'main.repeats',
                                            label: '压测数量',
                                            required: true
                                        },
                                            {
                                                view: 'number',
                                                bind: 'main.repeats',
                                                label: '压测数量',
                                                required: true
                                            },
                                            {
                                                view: 'number',
                                                bind: 'main.repeats',
                                                label: '压测数量',
                                                required: true
                                            }
                                        ]
                                    },
                                    {
                                        view: 'number',
                                        bind: 'main.repeats',
                                        label: '压测数量',
                                        required: true,
                                        addonAfter: (sender: YvanUI.Number) =>
                                            <Switch size="small" defaultChecked={true} onChange={(e) => {
                                                sender.disabled = !e
                                                sender.required = e
                                            }}/>,
                                    },
                                    {
                                        view: 'text',
                                        bind: 'main.t1',
                                        label: '输入框1',
                                        ref: 't1',
                                        disabled: {
                                            $watch: () => this.ctlState.t1Disabled
                                        },
                                        required: {
                                            $watch: () => !this.ctlState.t1Disabled
                                        },
                                        addonAfter: (sender: YvanUI.Text) =>
                                            <Switch size="small" defaultChecked={false} onChange={(e) => {
                                                this.ctlState.t1Disabled = !e
                                            }}/>,
                                        value: this.$watch(() => `[${this.main.repeats}]`)
                                    },
                                    {
                                        view: 'select',
                                        bind: 'main.t2',
                                        label: '输入框2',
                                        ref: 't2',
                                        data: [
                                            {value: 'a1', label: 'B1'},
                                            {value: 'a2', label: 'B2'},
                                            {value: 'a3', label: 'B3'},
                                            {value: 'a4', label: 'B4'},
                                        ],
                                        disabled: {
                                            $watch: () => this.ctlState.t2Disabled
                                        },
                                        required: {
                                            $watch: () => !this.ctlState.t2Disabled
                                        },
                                        addonAfter: (sender: YvanUI.Text) =>
                                            <Switch size="small" defaultChecked={false} onChange={(e) => {
                                                this.ctlState.t2Disabled = !e
                                            }}/>,
                                        value: this.$watch(() => `[${this.main.repeats}]`)
                                    },
                                    {
                                        view: 'date',
                                        bind: 'main.t3',
                                        label: '输入框3',
                                        ref: 't2',
                                        disabled: {
                                            $watch: () => this.ctlState.t3Disabled
                                        },
                                        required: {
                                            $watch: () => !this.ctlState.t3Disabled
                                        },
                                        addonAfter: (sender: YvanUI.Text) =>
                                            <Switch size="small" defaultChecked={false} onChange={(e) => {
                                                this.ctlState.t3Disabled = !e
                                            }}/>,
                                    },
                                    // {
                                    //     view: 'text',
                                    //     bind: 'main.t2',
                                    //     label: '输入框2',
                                    //     ref: 't2',
                                    //     visible: this
                                    //         .$watch(() => {
                                    //             console.log('run t2.$watch')
                                    //             return (_.size(this.main.t1) - 5) > 0 ? _.size(this.main.t1) : 0
                                    //         })
                                    //         .$then((rr) => {
                                    //             console.log('run t2.$then')
                                    //             return (rr % 2 == 1)
                                    //         })
                                    // },
                                    this.place1
                                ]
                            }
                        ]
                    }
                ],

            }
        ],
        footer: [
            {
                view: 'button',
                text: '校验',
                type: 'primary',
                onClick: () => {
                    this.refs.theform.validateFields().then(() => {
                    })
                }
            },
            {
                view: 'button',
                text: '创建',
                type: 'primary',
                onClick: () => {
                    this.v++
                    const vjson: any[] = []
                    for (let i = 0; i < this.main.repeats; i++) {
                        vjson.push({
                            view: 'text',
                            bind: `main.tr-${this.v}-${i}`,
                            label: `输入框-${this.v}-${i}`,
                            ref: `tr-${this.v}-${i}`
                        })
                    }
                    YvanUI.renderPlace(this, this.place1, vjson)
                }
            }
        ]
    }

    v = 0

    onBeforeRender() {
        window['biz'] = this
        console.log('onBeforeRender')
    }

    onRender() {
        window['biz'] = this
        console.log('onRender')
    }

    onShow() {
        console.log('onShow')
    }

    onBeforeDestory() {
        console.log('onBeforeDestory')
    }

    onDestory() {
        console.log('scope onDestory', this)
    }
}